<template>
  <div>
    <top-area></top-area>
    <div id="map"></div>
    <router-view></router-view>
    <div class="btn">
      <button @click="handleDirection">导航</button>
    </div>
    <bottom-area></bottom-area>
  </div>
</template>

<script setup>
import TopArea from '@/components/TopArea.vue'
import BottomArea from '@/components/BottomArea.vue'
import mapboxgl from 'mapbox-gl'
import { Scene } from '@antv/l7'
import 'mapbox-gl/dist/mapbox-gl.css'
import { onMounted, ref, provide } from 'vue'
import { Mapbox } from '@antv/l7'
import useControls from './hooks/useControls'
import MapboxDirection from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions'
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css'
const MAPBOX_TOKEN =
  'pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA'
let map = ref(null),
  scene = ref(null)
let isDirection = ref(false)
let direction = new MapboxDirection({
  accessToken: MAPBOX_TOKEN,
})
onMounted(() => {
  mapboxgl.accessToken = MAPBOX_TOKEN
  map.value = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v11',
    center: [114.29, 30.59],
    zoom: 1,
    projection: 'globe',
  })
  scene.value = new Scene({
    id: 'map',
    map: new Mapbox({
      mapInstance: map.value,
    }),
    logoVisible: false,
  })
  //add fog 希望将fog效果和center关联起来(跟颜色的明亮度关联起来)
  function fog() {
    let center = map.value.getCenter()
    map.value.setFog({
      color: `hsl(0, 0%, ${Math.abs(center.lng / 360)})`,
      'high-color': `hsl(0, 0%, ${Math.abs(center.lng / 360)})`,
    })
  }
  map.value.on('move', fog)
  //添加L7控件
  useControls(scene.value, map.value)
  //map scene需要在路由子组件中使用 就需要将他们传递过去 (provide/inject)
  provide('mapScene', {
    map: map.value,
    scene: scene.value,
  })
})
function handleDirection() {
  isDirection.value = !isDirection.value
  if (!isDirection.value) {
    map.value.addControl(direction, 'top-left')
  } else {
    map.value.removeControl(direction)
  }
}
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 100vh;
}
.btn {
  position: fixed;
  top: 200px;
  left: 10px;
  button {
    padding: 10px 20px;
  }
}
</style>
